<template>
  <!-- 创建/加入 -->
  <el-dialog
    :title="isJoin ? $t('add.add199') : $t('add.add205')"
    :visible.sync="dialogShow"
    top="30vh"
    width="800px"
    :close-on-click-modal="false"
  >
    <div v-if="isJoin" class="join">
      <el-form
        ref="joinForm"
        :model="joinForm"
        :size="formItemSize"
        label-position="left"
        label-width="200px"
      >
        <div style="margin-bottom: 40px">
          <el-form-item :label="$t('add.add206')" prop="">
            <el-select
              v-model="addForm.organizedType"
              :placeholder="$t('add.add201')"
              filterable
              style="width: 260px"
            >
              <el-option
                v-for="(item, index) in createType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item :label="$t('add.add221')" prop="">
          <!--          <el-input v-model="addForm.name" :disabled="addForm.organizedType===''" :placeholder="$t('add.add036')" style="width:260px" @input="onNameChange"/>-->
          <!-- <el-select v-model="addForm.id" style="width:260px" filterable placeholder="请选择">
              <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.id">
              </el-option>
          </el-select> -->
          <el-select
            v-model="addForm.name"
            :disabled="addForm.organizedType === ''"
            :placeholder="$t('partner.hezuo23')"
            :remote-method="onNameChange"
            clearable
            filterable
            :multiple="false"
            remote
            :reserve-keyword="false"
            @blur.native.capture="onSelectBlur"
          >
            <el-option
              v-for="item in nameOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="!isJoin" class="create">
      <el-form
        ref="createForm"
        :model="createForm"
        :size="formItemSize"
        label-position="left"
        label-width="200px"
      >
        <div style="margin-bottom: 40px">
          <el-form-item :label="$t('add.add206')" prop="">
            <el-select
              v-model="createForm.organizedType"
              :placeholder="$t('add.add201')"
              filterable
              style="width: 260px"
            >
              <el-option
                v-for="(item, index) in createType"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item :label="$t('add.add033') + '：'" prop="">
          <el-input
            v-model="createForm.name"
            :placeholder="$t('add.add202')"
            style="width: 260px"
          />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :size="optionButtonSize" plain @click="cancleHandle">{{
        $t('add.add203')
      }}</el-button>
      <el-button :size="optionButtonSize" type="primary" @click="submitHandle">{{
        $t('add.add150')
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'BLZMasterIndex',

  data() {
    return {
      formItemSize: 'small',
      // 是加入还是创建
      isJoin: false,
      joinForm: {
        account: '',
      },
      createForm: {
        name: '',
        organizedType: '', // 1诊所 2技工所
      },
      addForm: {
        organizedType: '',
        name: '',
      },
      dialogShow: false,
      options: [],
      nameOptions: [],
      createType: [
        {
          value: 1,
          label: this.$t('add.add208'),
        },
        {
          value: 2,
          label: this.$t('add.add209'),
        },
      ],
    };
  },

  mounted() {},

  methods: {
    cancleHandle() {
      this.dialogShow = false;
      this.createForm = {
        name: '',
        organizedType: '', // 0诊所 1技工所
      };
      this.addForm = {
        organizedType: '',
        name: '',
      };
    },

    onSelectBlur() {
      setTimeout(() => {
        if (
          this.addForm.name === '' ||
          this.addForm.name === null ||
          this.addForm.name === undefined
        ) {
          this.nameOptions = [];
        }
      }, 500);
    },
    onNameChange(v) {
      if (v === '' || v === null || v === undefined || v.trim() === '') {
        this.nameOptions = [];
        return;
      }
      this.$http
        .get('/sys/organized/joiningInstitutions', {
          params: {
            joiningType: this.addForm.organizedType,
            joiningName: v,
          },
        })
        .then(({ data: res }) => {
          this.nameOptions = res.data;
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    getOptionLabel() {
      this.$http
        .get('/sys/organized/getOptionLabel')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.optionLabelList = res.data;
            this.optionLabelList.forEach((item) => {
              if (item.currentDept) {
                this.form.origination = item.id;
                window.localStorage.setItem('user_roleId', item.roleId);
                window.localStorage.setItem('user_jg_id', item.id);
                localStorage.setItem('user_owner', item.owner);
                localStorage.setItem('user_permissionsList', item.permissionsList);
              }
            });
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    submitHandle() {
      let url, form, msg;
      if (!this.isJoin) {
        url = '/sys/organized/createOrganized';
        form = this.createForm;
        msg = this.$t('add.add035');
      } else {
        url = '/sys/organized/joinOrganized';
        form = this.addForm;
        msg = this.$t('add.add037');
      }
      if (this.isJoin) {
        const name = this.nameOptions.find((e) => e.id === form.name).name;
        form.name = name;
      }
      this.$http
        .post(url, form)
        .then(({ data: res }) => {
          console.log('res--->', res);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            if (url == '/sys/organized/createOrganized') {
              localStorage.setItem('user_owner', res.data.owner);
              localStorage.setItem('user_permissionsList', res.data.permissionsList);
            }
            // this.getOptionLabel()
            this.$message.success(msg);
            this.$emit('getList');
            this.dialogShow = false;
            this.createForm = {
              organizedType: '',
              name: '', // 0诊所 1技工所//0诊所 1技工所
            };
            this.addForm = {
              organizedType: '',
              name: '', // 0诊所 1技工所
            };
            localStorage.setItem('jion_juese', true);
            location.reload();
            if (this.options.length == 0 && msg == this.$t('add.add035')) {
              this.$router.push('/login');
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.join,
.create {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 100px 0;
  // .item{
  //     display: flex;
  //     flex-direction: column;
  //     align-items: center;
  //     margin-bottom: 25px;
  //     span{
  //         font-size: 14px;
  //         font-weight: 500;
  //         line-height: 20px;
  //         color: #333333;
  //         margin-bottom: 25px;
  //     }
  // }
}
.join .el-select {
  width: 100%;
}
</style>
